<template>
  <div>
    <el-dialog title="查看还款" top="5vh" :visible.sync="huanKuanShow" :direction="direction" size="55%" :before-close="Close">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="内容" name="first">
          <el-form ref="message" :label-position="labelPosition" :inline="true" :model="message" label-width="90px">
            <el-row>
              <el-col :span="100">
                <el-form-item label="单位" label-width="70px">
                  <el-input v-model="message.input1" size="mini" disabled></el-input>
                </el-form-item>
                <el-form-item label="部门" label-width="60px">
                  <el-input v-model="message.input2" size="mini" disabled></el-input>
                </el-form-item>
                <el-form-item label="姓名" label-width="50px">
                  <el-input v-model="message.input3" size="mini" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="100">
                <el-form-item label="公司账户" label-width="70px">
                  <el-input v-model="message.gszh" size="mini" disabled></el-input>
                </el-form-item>
                <el-form-item label="还款金额" label-width="70px">
                  <el-input v-model="message.hkje" size="mini" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="100">
                <el-form-item class="fromItem" label="备注" label-width="70px">
                  <el-input v-model="message.desc" class="textarea" disabled type="textarea"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="评审意见" name="second">
          <v-pingshenyj :activities="activities" />
        </el-tab-pane>
        <el-tab-pane label="流程检视" name="third">
          <v-liuchengjs :dsadas="dsadas" />
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import VPingshenyj  from '@/views/rfcwgl/components/pingShenYJ/index.vue'
import VLiuchengjs  from '@/views/rfcwgl/components/liuChengJS/index.vue'
export default {
  components: { VPingshenyj, VLiuchengjs },
  data() {
    return {
      direction: 'rtl',
      activeName: 'first',
      labelPosition: 'right',
      huanKuanShow: true,
      message: {
        input1: '华电',
        input2: '技术部',
        input3: '张三',
        radio: '是',
        gszh: '42123123124123123',
        hkje: 423,
        desc: '2020年4月15日出差工作还款'
      },
      // 时间轴信息
      activities: [
        {
          time: '2018-04-15 08:30:20',
          operationState: '发起 张三 [已办理->部门负责人]',
          result: '同意',
          color: '#0bbd87'
        },
        {
          time: '2018-04-18 09:25:18',
          operationState: '部门负责人 李四 [已办理->公司负责人]',
          result: '同意',
          color: '#0bbd87'
        },
        {
          time: '2018-04-20 10:40:20',
          operationState: '公司负责人 王五 [已办理->结束]',
          result: '同意',
          color: '#0bbd87'
        }
      ],
      dsadas: [
        {
          operation: '发起',
          operationState: '张三 [已办理->部门负责人]',
          starttime: '2019-05-07 12:21',
          outtime: '2019-05-07 17:21'
        },
        {
          operation: '部门审批',
          operationState: '李四 [已办理->公司负责人]',
          starttime: '2019-05-07 18:21',
          outtime: '2019-05-07 20:21'
        },
        {
          operation: '公司审批',
          operationState: '王五 [已办理->结束]',
          starttime: '2019-05-07 22:21',
          outtime: '未完成'
        }
      ]
    }
  },
  methods: {
    openlook() {
      this.huanKuanShow = true
    },
    outlookover() {
      this.huanKuanShow = false
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总价'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] += ' 元'
        } else {
          sums[index] = ''
        }
      })

      return sums
    },
    Close() {
      this.$confirm('你确定要离开吗？')
        .then(_ => {
          this.huanKuanShow = false
        })
        .catch(_ => {})
    },
  }
}
</script>

<style lang="scss" scoped>
.fromItem {
  width: 100%;
  .textarea {
    width: 350%;
  }
}
// .el-table {
//   margin: 0 auto;
// }

::v-deep .el-input.is-disabled .el-input__inner {
  background-color: #fff;
  border-color: #e4e7ed;
  color: #606266;
  cursor: not-allowed;
}
::v-deep .el-textarea.is-disabled .el-textarea__inner {
  background-color: #fff;
}
</style>
